<template>
  <div>
    <CustomTitle title="故障信息" />
    <div class="w-[557px] h-[311px] bg-[#1B1B1B] rounded-[10px] mt-[30px] flex flex-col px-[35px] py-[30px] overflow-x-hidden">
      <div class="h-[250px] overflow-auto">
        <div class="flex items-start mb-[20px]" v-for="(data, index) of datas" :key="index">
          <div class="w-[10px] flex-shrink-0 h-[10px] bg-[#F83253] rounded-[10px] mt-[4px] mr-[14px]"></div>
          <div class="text-[12px] leading-[18px] text-label-normal">{{ data.time }} {{ data.msg }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { apiInstrumentErrors } from '@/http/api/controller_status';
import { useSocketMsg } from '@/store/socket_msg';
const storeSocketMsg = useSocketMsg();
const datas = ref<any[]>([]);
const getData = async () => {
  try {
    const res = await apiInstrumentErrors();
    datas.value = res.data;
  } catch (error) {}
};
onBeforeMount(() => {
  getData();
});
watch(
  () => storeSocketMsg.error,
  val => {
    if (val) {
      getData();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped></style>
